<template>
  <div class="nav">
    <div>
      <ul class="nav-menu">
        <li v-for="item in data.exp">
          <span @click="forwordType(item)">{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <div class="search-box">
      <el-input type="text" v-model="data.search" placeholder="搜索" @keyup.enter="search">
        <template #suffix>
          <yu-icon @click="search" iconName="chaxun" class="search-icon" />
        </template>
      </el-input>
    </div>
  </div>
</template>

<script setup>
  import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
  let { proxy } = getCurrentInstance();
  import { systemStore } from '@/pinia/system';
  const store = systemStore();
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const data = reactive({ exp: [], search: '' });
  data.exp = [
    { name: '首页', url: '/', type: 'index' },
    { name: '日本动漫', url: 'http://localhost', type: 'type' },
    { name: '国产动漫', url: 'http://localhost', type: 'type' },
    { name: '日本动漫', url: 'http://localhost', type: 'type' },
    { name: '日本动漫', url: 'http://localhost', type: 'type' },
  ];
  const search = () => {
    store.changeVideo('search');
  };
  onMounted(() => {
    //初始化页面
    loadVideo();
  });
  const loadVideo = () => {
    //加载导航菜单
    loadNav();
  };
  const forwordType = item => {
    store.changeVideo(item.type);
  };

  //导航栏获取
  const loadNav = async () => {
    data.exp = await proxy.$api.video.queryNav({
      ruleId: '927493ee8d72492dabcbfb7a137c3353',
    });
  };
</script>

<style lang="scss" scoped>
  .nav {
    height: 60px;
    line-height: 60px;
    .nav-menu {
      list-style-type: none;
      padding: 0;
      margin: 0;
      li {
        float: left;
        margin: 0 10px;
        cursor: pointer;
      }
      li:hover {
        color: red;
      }
    }
    .search-icon {
      cursor: pointer;
    }
    .search-box {
      margin-right: 35px;
      float: right;
      height: 40px;
      :deep(.el-input--suffix .el-input__inner) {
        padding-right: 120px;
        height: 40px;
        font-size: 16px;
      }
      svg {
        font-size: 22px;
      }
    }
  }
</style>
